<script setup lang="ts">
import { ref } from 'vue'
import crop from '~/components/FullCrop.vue'
import Layout from '~/components/Layout.vue'
import upload from '~/components/Upload.vue'
import eventBus from '~/eventBus' // 导入事件总线
import { useCropStore } from '~/stores/crop'

const cropStore = useCropStore()
const cropping = computed(() => cropStore.cropping)

const isEditing = ref(false)
function edit() {
  isEditing.value = true
}

function editing() {
  isEditing.value = !isEditing.value
}

const compression = ref(100)

// 初始化 imageSettings
const imageSettings = ref({
  longger: 1920,
  width: 1920,
  height: 1080,
  size: 50,
  lengthRatio: 16,
  heightRatio: 9,
})

function onChangeRatio(length: number, height: number) {
  imageSettings.value.lengthRatio = length
  imageSettings.value.heightRatio = height
}

function saveImage() {
  if (!cropping.value)
    eventBus.emit('download-checked', '')
}

function compressImageToKB() {
  if (!cropping.value)
    eventBus.emit('compressImageToKB', imageSettings.value.size)
}

function compressImageToPercentage() {
  if (!cropping.value)
    eventBus.emit('compressImageToPercentage', compression.value)
}

function compressImageToMaxSide() {
  if (!cropping.value)
    eventBus.emit('compressImageToMaxSide', imageSettings.value.longger)
}

function compressImageToWidth() {
  if (!cropping.value)
    eventBus.emit('compressImageToWidth', imageSettings.value.width)
}

function compressImageToHeight() {
  if (!cropping.value)
    eventBus.emit('compressImageToHeight', imageSettings.value.height)
}

function cropImageByRatio() {
  if (!cropping.value)
    eventBus.emit('cropImageByRatio', [imageSettings.value.lengthRatio, imageSettings.value.heightRatio])
}

function openLink() {
  const url = 'https://gitee.com/9658065/picture-cropper-nuxt'
  window.open(url, '_blank')
}
</script>

<template>
  <Layout>
    <template #title-bar>
      <div class="flex flex-row self-end">
        <span i-carbon:image-copy inline-block text-5xl class="self-end" @click="openLink" />
        <text inline-block text-4xl hover:opacity-75 class="self-end" @click="openLink">
          灵驹图片裁剪
        </text>
      </div>
    </template>
    <template #header-bar>
      <div class="h-full flex flex-col justify-between">
        <span class="text-xs">Powered by  <a class="text-white" target="_blank" href="https://gitee.com/9658065/html-runner">Html Runner</a></span>
        <span class="flex flex-row self-end justify-between">
          <span class="self-center" i-carbon:web-services-task-definition-version @click="openLink" />
          <span class="self-center" @click="openLink">
            1.10
          </span>
        </span>
      </div>
    </template>
    <template #main>
      <div class="h-full flex flex-row">
        <div class="bg-gry-300 flex-1">
          <div :class="isEditing ? '' : 'hidden'" class="fixed inset-0 z-2003" style="z-index:2003">
            <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm backdrop-filter" />
            <span class="closeButton" @click="editing"><i i-carbon:close /></span>
            <crop />
          </div>
          <upload :class="{ hidden: isEditing }" @edit-image="edit" />
        </div>
        <div class="h-full w-[200px] overflow-auto bg-blue-300 p-4 text-left text-sm">
          <!-- 按钮区 -->
          <div class="">
            <!-- 保存按钮 -->
            <div v-loading="cropping" class="flex justify-center p4">
              <el-button type="primary" @click="saveImage">
                <span i-carbon:save /> 下载选中图片
              </el-button>
            </div>
            <!-- 宽度和高度 -->
            <el-divider style="margin: 5px;" />
            <div class="p-2">
              <span class="">图片尺寸调整（像素）</span>
              <span class="flex flex-row justify-between pt-2">边<el-input-number
                v-model="imageSettings.longger" pl-1
                :step="1" size="small" :min="1" controls-position="right"
              /><el-tooltip
                content="最长边调整"
                placement="top"
              ><el-button type="primary" size="small" @click="compressImageToMaxSide">
                Go
              </el-button></el-tooltip></span>
              <span class="flex flex-row justify-between pt-2">长<el-input-number
                v-model="imageSettings.width" pl-1
                :step="1" size="small" :min="1" controls-position="right"
              /><el-button
                type="primary" size="small"
                @click="compressImageToWidth"
              >
                Go
              </el-button>
              </span>

              <span class="flex flex-row justify-between pt-2">高<el-input-number
                v-model="imageSettings.height" pl-1
                :step="1" size="small" :min="1" controls-position="right"
              /><el-button
                type="primary" size="small"
                @click="compressImageToHeight"
              >
                Go
              </el-button></span>
            </div>
            <!-- 图片比例 -->
            <el-divider style="margin: 5px;" />
            <div class="p-2">
              <span class="flex flex-row justify-between">图片比例裁剪<el-button
                type="primary" size="small"
                @click="cropImageByRatio"
              >
                Go
              </el-button></span>
              <span class="flex flex-row pt-2">长<el-input-number
                v-model="imageSettings.lengthRatio" pl-1 :step="1"
                size="small" :min="1" controls-position="right"
              /></span>
              <span class="flex flex-row pt-2">高<el-input-number
                v-model="imageSettings.heightRatio" pl-1 :step="1"
                size="small" :min="1" controls-position="right"
              /></span>
              <div class="w-full flex flex-wrap gap-2 pt-2 text-sm">
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(1, 1)">1:1</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(3, 4)">3:4</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(4, 3)">4:3</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(9, 16)">9:16</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(16, 9)">16:9</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(2, 3)">2:3</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(3, 2)">3:2</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(18, 9)">18:9</span>
                <span inline-block text-2xl class="text-base icon-btn" @click="onChangeRatio(9, 18)">9:18</span>
              </div>
            </div>
            <el-divider style="margin: 5px;" />
            <!-- 文件大小 -->
            <div class="p-2">
              <span class="w-full flex flex-row justify-between">文件大小调整 <el-button
                type="primary" size="small"
                @click="compressImageToKB"
              >
                Go
              </el-button></span>
              <span class="flex flex-row pt-2">
                <el-input-number
                  v-model="imageSettings.size" pl-1 :step="1" size="small" :min="1"
                  controls-position="right"
                />(KB)
              </span>
            </div>
            <!-- 压缩比例 -->
            <el-divider style="margin: 5px;" />
            <div class="slider-demo-block p-2">
              <span class="flex flex-row justify-between">边长压缩 {{ compression }}%<el-button
                type="primary" size="small"
                @click="compressImageToPercentage"
              >
                Go
              </el-button></span>
              <el-slider v-model="compression" :step="10" show-stops :min="10" placement="bottom" />
            </div>
            <el-divider style="margin: 5px;" />
          </div>
        </div>
      </div>
    </template>
  </Layout>
</template>

<style scoped>
.dialog-footer {
  text-align: right;
}

.closeButton {
  width: 44px;
  height: 44px;
  font-size: 24px;
  color: #fff;
  background-color: #000;
  border-color: #fff;
  top: 40px;
  right: 40px;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.7;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  z-index: 2003;
}
</style>
